﻿<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>加载OGC的WMTS图层</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <script type="text/javascript">
      

        //地图初始化函数
        function init() {
          
            //初始化地图容器
            var map = new ol.Map({
                target: 'mapCon',
                layers: [new ol.layer.Tile({
                        source: new ol.source.OSM(),
                        opacity: 0.7
                    })
                ],
                view: new ol.View({
                    center: [-11158582, 4813697],
                    zoom: 4,
                    projection: 'EPSG:3857'
                })
            });
           
            /*======创建WMTS图层对象并加载到地图中======*/
            var projection = ol.proj.get('EPSG:3857');
            var projectionExtent = projection.getExtent();
            var size = ol.extent.getWidth(projectionExtent) / 256;

            var resolutions = new Array(14);
            var matrixIds = new Array(14);
            for (var z = 0; z < 14; ++z) {
                //为这个WMTS图层生存分辨率和matrixIds数组
                resolutions[z] = size / Math.pow(2, z);
                matrixIds[z] = z;
            }
            var wmtsLayer = new ol.layer.Tile({
                opacity: 0.7,
                source: new ol.source.WMTS({
                url: 'https://services.arcgisonline.com/arcgis/rest/' +
                    'services/Demographics/USA_Population_Density/MapServer/WMTS/',
                layer: '0',
                matrixSet: 'EPSG:3857',
                format: 'image/png',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                style: 'default',
                wrapX: true
                })
            });
            map.addLayer(wmtsLayer);
        }
    </script>
</head>

<body onload="init();">
    <!--地图显示-->
    <div id="mapCon" style="width: 100%; height: 95%; position: absolute;">
    </div>
</body>

</html>